/*
??????
*/
var slide = (function() {
	var quadEaseOut;
    var doc = document;

	var $ = function(s){
		return document.getElementById(s);
	}
	/**
	 ?????????
	 @param {Element} current ????
	 @param {Object} obj ????
	**/
	var getIndex = function(current, obj) {
		for (var i=0; i<obj.length; i++) {
			if (obj[i] == current) {
				return i;
			}
		}
	};

	/**
	 @param {Element} el ????
	**/
	var siblings = function(el) {
		var r = [],
			n = el.parentNode.firstChild;
		for ( ; n; n = n.nextSibling ) {
			if ( n.nodeType === 1 && n !== el ) {
				r.push( n );
			}
		}
		return r;
	};
	/**
	 ?? Slide ??
	 @param {Element} el Slide ??
	 @param {Number} width Slide ??
	 @param {Number} height Slide ??
	**/
	var setSlideWH = function(el, width, height) {
		var styleW,
			styleH;
		if (width == '100%') {		// ?????
			styleW = '100%';
		} else {					// ??
			styleW = width + 'px';
		}
		
		if (height == '100%') {		// ?????
			styleH = '100%';
		} else {					// ??
			styleH = height + 'px';
		}
		
		el.style.width = styleW;
		el.style.height = styleH;

		
	};
	
	var readStyle = function(obj, name){
		if(obj.style[name]){
			return obj.style[name];
		}else if(obj.currentStyle){
			return obj.currentStyle[name]
		}else if(document.defaultView && document.defaultView.getComputedStyle){
			var d=document.defaultView.getComputedStyle(obj,null);
			return d.getPropertyValue(name)
		}else{
			return null
		}
	};
	var style = {
		setOpacity : function(obj,opacity){
			if(typeof(obj.style.opacity) != 'undefined'){
				obj.style.opacity = opacity;
			}else{
				obj.style.filter = 'Alpha(Opacity=' + (opacity*100) + ')';
			};
		}
	};
	/* ?? */
	var extend = {
		/**
		 ????
		 @param {Element} target ????
		**/
		fadeIn : function(obj,time){
			if(readStyle(obj, 'display') == 'none'){
				obj.style.display = 'block';
			};
			style.setOpacity(obj,0);
			time = time || 200;
			var opacity = 0,step = time / 20;
			clearTimeout(obj.showT);
			obj.showT = setTimeout(function(){
				if(opacity >= 1) { style.setOpacity(obj,1); return; }
				opacity +=1/step;
				style.setOpacity(obj,opacity);
				obj.showT = setTimeout(arguments.callee,20);
			},20);
		},
		
		/**
		 ????
		 @param {Element} target ????
		**/
		fadeOut : function(obj,time){
			time = time || 200;
			style.setOpacity(obj,1);
			var opacity = 1,step = time / 20;
			clearTimeout(obj.showT);
			obj.showT = setTimeout(function(){
				if(opacity <= 0){
					obj.style.display = 'none';	
					style.setOpacity(obj,0);
					return;
				};
				opacity -= 1/step;
				obj.showT = setTimeout(arguments.callee,20);
			},20);
		},
		/**
		 ????
		 @param {Element} target ????
		 @param {String} key target??
		 @param {Number} start key???
		 @param {Number} end key???
		 @param {Number} speed ??
		 @param {Function} endFn ??????
		 @param {String} u ????
		**/
		actPX : function(obj,key,start,end,speed,endFn,u){
		  if(typeof(u) == 'undefined'){u = 'px'};
		  clearTimeout(obj['_extend_actPX' + key.replace(/\-\.\=/,'_') + '_timeOut']);
		  if(start > end){
			speed = - Math.abs(speed);
		  }else{
			speed = Math.abs(speed);
		  };
		  var now = start;
		  var length = end - start;
		  obj['_extend_actPX' + key.replace(/\-\.\=/,'_') + '_timeOut'] = setTimeout(function(){
			now += speed;
			var space = end - now;
			if(start < end){
			  if(space < length/3){
				speed = Math.ceil(space/3);
			  };
			  if(space <= 0){ 
				obj[key] = end + u;
				if(endFn){endFn()};
				return;
			  };
			}else{
			  if(space > length/3){
				speed = Math.floor(space/3);
			  };
			  if(space >= 0){ 
				obj[key] = end + u;
				if(endFn){endFn()};
				return;
			  };
			};
			
			obj[key] = now + u;
			obj['_extend_actPX' + key.replace(/\-\.\=/,'_') + '_timeOut'] = setTimeout(arguments.callee,20);
			
		  },20);
		}
	}
	/**
	 ??
	**/
	var config = {
		imgData: [],					// ???????
		imgTargetId: '',				// ??? Slide ?? ID
		imgWidth: '100%',				// ???????
		imgHeight: '100%',				// ???????
		imgAuto: false,					// ???????
		imgInterval: 3000,				// ???????
		imgDataLen: 0,					// ???????
		goSwitch: true,					// ?????????
		index: 4,						// ???????
		_index: 0,
		curImg: 5,
		indexShow : 5
	};

	/**
	 ????? Slide ??
	**/
	

	var buildSlide = function() {
		// ?? Slide ??
        var panelHtml  = $('_slide').getElementsByTagName('ul')[0].innerHTML;
        var aLi = $('_slide').getElementsByTagName('ul')[0].getElementsByTagName('li');
		$('_slide').getElementsByTagName('ul')[0].innerHTML = panelHtml + panelHtml;
		
		// ????
		setSlideWH($(config.imgTargetId), config.imgWidth, config.imgHeight);
		$('_slide').getElementsByTagName('ul')[0].style.left = '-' + aLi[0].offsetWidth * 4 + 'px';
	};

    quadEaseOut = function (t, b, c, d, s) {
       return -c *(t/=d)*(t-2) + b;
    };
	var move = function(){
		//var e = this;
		clearTimeout(config.timer),
		config.t < 50 ? (boxMoveTo(Math.round(quadEaseOut(config.t += 3, config.b, config.c, 50))), config.timer=setTimeout(function(){move()}, 30)) : boxMoveTo(config.target)
	}
	var boxMoveTo = function(e){
		$('slide_list').style.left = e+"px"
	}

    //var dotNum = 0;
    var d  = false;
	var run = function(e, t){
		
		var slideList = $('slide_list').getElementsByTagName('li');
        dotList = $("focus_dot").getElementsByTagName('li');
        
			slideList[config._index].className = '';
			for(var i=0; i<config.imgData*2; i++){
				slideList[i].className = '';
				slideList[i].getElementsByTagName("p")[0].style.display = 'none';
				}

			for(var i=0; i<config.imgData; i++){
				dotList[i].className = '';
				}
		e = e < 0 ? config.imgData - 1 : e > config.imgData ? 1 : e,
		config.target = -Math.abs(slideList[0].offsetWidth)*(config.index = e),
		config.t = 0,
		config.b = t ? config.target - slideList[0].offsetWidth : config.target + slideList[0].offsetWidth,
		config.c = config.target - config.b,
		
		move();
		
		config.curImg = config.index + 1 > 6 ? 1 : (config.index + 1);
		slideList[config.curImg].className = 'cur';
        var dotN = 0;
        if(config.index >= 4){
	        dotN = config.index - 4;
        }else{
	        dotN = config.curImg;
        }
        dotList[dotN].className = "current";
		slideList[config.curImg].getElementsByTagName("p")[0].style.display = 'block';
		config._index = config.curImg;
	}
	
	/**
	 ????
	**/
	var b = false, c = false, timerA = null;
	var autoSwitch = function() {
		var slideList = $('slide_list').getElementsByTagName('li');
		// ?????
		for (var i=0; i<config.imgDataLen; i++) {
			// ???????
			if (slideList[i].className == 'cur') {
				// ??????????
				config.index = getIndex(slideList[i], slideList);
			}
		}

		var autoFun = function() {
			if (config.goSwitch) {
				
				config.index = config.index == 5 ? 0 : config.index;

				if(!b){
					b = true;
					config.index = 0;
				}

				if(config.index == 3 && !c){
					clearInterval(timerA);
					timerA = setInterval(autoFun, 10000);
					c = true;
				}else if(c){
					c = false;
					clearInterval(timerA);
					timerA = setInterval(autoFun, config.imgInterval);
				}
				
				//console.log(config.index);				
				run(config.index, !1);				
				config.index += 1;
			}
			
		};
		
		timerA = setInterval(autoFun, config.imgInterval);
	};
	/**
	 ????
	**/
	var touchFun = function(evt){
		var $ = function(o){ return document.querySelector(o)}, $$ = function(o){ return document.querySelectorAll(o)}, touchInfo = {startX:0, endX:0}, slide = $('#slide'), btnL = $('#sliderL'), btnR = $('#sliderR');
		slide.addEventListener('touchstart', function(evt) {
			   evt.preventDefault();	   
               if(evt.changedTouches.length == 0)  return;
               touchInfo.startX = evt.changedTouches[0].pageX;
        }, false);
		slide.addEventListener('touchend', function(evt) {
			   evt.preventDefault();
               if(evt.changedTouches.length == 0) return;
               touchInfo.endX = evt.changedTouches[0].pageX; 
               var offset = touchInfo.endX - touchInfo.startX; 

               if(offset < 0) {
					run(++config.index, !1)
               } else if(offset > 0) {
                   run(--config.index, !0)
               }else{
					if(evt.target.parentNode.parentNode.className == 'cur'){
						window.open(evt.target.parentNode.getAttribute('href'), '_blank');
					}else{
						return;
					}
			   }
        },false);
		
		
		btnL.addEventListener('touchend', function() {run(++config.index, !1)}, false)
		btnR.addEventListener('touchend', function() {run(--config.index, !0)}, false)
	};
	return {
		init: function(obj, e) {
			// ??????
			config.imgData = obj.data;								// ??????
			config.imgTargetId = obj.targetId;						// ?? Slide ?? ID
			config.imgWidth = obj.width || config.imgWidth;			// ??????
			config.imgHeight = obj.height || config.imgHeight;		// ??????
			config.imgAuto = obj.auto || config.imgAuto;			// ??????
			config.imgInterval = obj.interval || config.imgInterval;// ??????
			//config.imgDataLen = config.imgData.length;				// ??????
			
			// ?? Slide ??
			buildSlide();
			var slideList = $('slide_list').getElementsByTagName('li');
			$('slide_list').style.width = slideList[0].offsetWidth*slideList.length + 'px';
			slideList[config.curImg].className = 'cur';
			var btnL = $('sliderL'), btnR = $('sliderR'), btnClose = $('slidClosed');
			btnR.onclick = function(){	
				clearInterval(timerA);
				config.index += 1;
				run(config.index, !1)
			}
		
			btnL.onclick = function(){ 
				clearInterval(timerA);
				config.index -= 1;
				run(config.index, !0)
			}
			$('slide').onmouseover = function(event){
				config.index = Math.ceil(Math.abs(parseInt($('_slide').getElementsByTagName('ul')[0].style.left)/slideList[0].offsetWidth));
				clearInterval(timerA);
				timerA = null;
				event.stopPropagation();
			}
			$('slide').onmouseout = function(event){
				if (config.imgAuto) {
					
					autoSwitch();
				}
				config.index = config.curImg;
				event.stopPropagation();
			}
			if(/ipad;/i.test(navigator.userAgent.toLowerCase())){
				touchFun(e);
			}
			// ????
			if (config.imgAuto) {
				autoSwitch();
			}

			   dotList = $("focus_dot").getElementsByTagName('li');
        
				var n;
			    for(n = 0; n < dotList.length; n++ ){
				    	dotList[n].index = n;
						dotList[n].onclick = function() {	
							if(config.curImg == this.index || config.curImg == this.index + 5) return;
							var n = 0;
							n = config.curImg > 4 ? 0 : config.curImg;
							
							if(this.index > n){
								run(this.index-1, !1);
							}else{
								run(this.index-1, !0)
							}
							config.curImg = this.index;
						}
				    
			    }
		}
	}
})();